<template>
  <el-card class="todo">
    <template #header>
      <span>{{ `待办` }}</span>
    </template>
    <div>
      <el-row
        :gutter="40"
        class="panel-group"
      >
        <el-col
          v-if="list.length>0"
          :span="4"
          class="daiban"
        >
          <div
            class="card-panel"
            style="background-color: #1571fa;"
            @click="goTask('1')"
          >
            <div class="card-panel-description">
              <count-to
                :start-val="0"
                :end-val="list[0].taskCount"
                :duration="2600"
                class="card-panel-num"
              />
              <div class="card-panel-text">
                {{ list[0].upcoming }}
              </div>
            </div>
            <div class="card-panel-icon-wrapper">
              <img
                src="../../../../assets/imges/commission/1.png"
                alt=""
              >
            </div>
          </div>
        </el-col>
        <el-col
          v-if="list.length>1"
          :span="4"
          class="daiban"
        >
          <div
            class="card-panel"
            style="background-color: #EF609E;"
            @click="goTask('2')"
          >
            <div class="card-panel-description">
              <count-to
                :start-val="0"
                :end-val="list[1].taskCount"
                :duration="2600"
                class="card-panel-num"
              />
              <div class="card-panel-text">
                {{ list[1].upcoming }}
              </div>
            </div>
            <div class="card-panel-icon-wrapper">
              <img
                src="../../../../assets/imges/commission/2.png"
                alt=""
              >
            </div>
          </div>
        </el-col>
        <el-col
          v-if="list.length>2"
          :span="4"
          class="daiban"
        >
          <div
            class="card-panel"
            style="background-color: #A14BF4 ;"
            @click="goTask('3')"
          >
            <div class="card-panel-description">
              <count-to
                :start-val="0"
                :end-val="list[2].taskCount"
                :duration="2600"
                class="card-panel-num"
              />
              <div class="card-panel-text">
                {{ list[2].upcoming }}
              </div>
            </div>
            <div class="card-panel-icon-wrapper">
              <img
                src="../../../../assets/imges/commission/3.png"
                alt=""
              >
            </div>
          </div>
        </el-col>
        <el-col
          v-if="list.length>3"
          :span="4"
          class="daiban"
        >
          <div
            class="card-panel"
            style="background-color: #FD9C55;"
            @click="goTask('4')"
          >
            <div class="card-panel-description">
              <count-to
                :start-val="0"
                :end-val="list[3].taskCount"
                :duration="2600"
                class="card-panel-num"
              />
              <div class="card-panel-text">
                {{ list[3].upcoming }}
              </div>
            </div>
            <div class="card-panel-icon-wrapper">
              <img
                src="../../../../assets/imges/commission/4.png"
                alt=""
              >
            </div>
          </div>
        </el-col>
        <el-col
          v-if="list.length>4"
          :span="4"
          class="daiban"
        >
          <div
            class="card-panel"
            style="background-color: #37C0EA;"
            @click="goTask('5')"
          >
            <div class="card-panel-description">
              <count-to
                :start-val="0"
                :end-val="list[4].taskCount"
                :duration="2600"
                class="card-panel-num"
              />
              <div class="card-panel-text">
                {{ list[4].upcoming }}
              </div>
            </div>
            <div class="card-panel-icon-wrapper">
              <img
                src="../../../../assets/imges/commission/5.png"
                alt=""
              >
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import CountTo from 'vue-count-to'
import SystemConfigAPI from '@/api/system-config'
export default {
  name: 'Todo',
  components: {
    CountTo
  },
  data() {
    return {
      list: [],
      colorClass: ['icon-people', 'icon-message', 'icon-money', 'icon-shopping']
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await SystemConfigAPI.getList('todo', { page: 1, pageSize: 10 })
      if (res.code === 200) {
        this.list = res.data.pageItems
      }
    },
    goTask() {
      // if (val === '1') {
      //   this.$router.push({
      //     path: '/salesManage/cartonOrder',
      //     query: { filter: this.list[0].filter }
      //   })
      // } else if (val === '2') {
      //   this.$router.push({
      //     path: '/salesManage/cartonOrder',
      //     query: { filter: this.list[1].filter }
      //   })
      // } else if (val === '3') {
      //   this.$router.push({
      //     path: '/salesManage/cartonOrder',
      //     query: { filter: this.list[2].filter }
      //   })
      // } else if (val === '4') {
      //   this.$router.push({
      //     path: '/salesManage/cartonOrder',
      //     query: { filter: this.list[3].filter }
      //   })
      // } else {
      //   this.$router.push({
      //     path: '/salesManage/cartonOrder',
      //     query: { filter: this.list[4].filter }
      //   })
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.todo {
  width: 100%;
  margin-bottom: 10px;
  & /deep/ .el-card__header {
    padding: 5px 10px;
  }
  & /deep/ .el-card__body {
    padding: 10px 15px;
  }

  span {
    font-size: 15px;
    font-weight: 700;
  }
  .panel-group {
    margin-top: 5px;
    .card-panel {
      height: 85px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #fff;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: row;
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
        .icon-people {
          background: #40c9c6;
        }
        .icon-message {
          background: #36a3f7;
        }
        .icon-money {
          background: #f4516c;
        }
        .icon-shopping {
          background: #34bfa3;
        }
      }
      .icon-people {
        color: #40c9c6;
      }
      .icon-message {
        color: #36a3f7;
      }
      .icon-money {
        color: #f4516c;
      }
      .icon-shopping {
        color: #34bfa3;
      }
      .card-panel-icon-wrapper {
        border-radius: 50%;
        height: 45px;
        width: 45px;
        text-align: center;
        line-height: 55px;
        background-color: rgba(0, 0, 0, 0.08);
        transition: all 0.38s ease-out;
        img {
          height: 20px;
          width: 20px;
        }
      }
      .card-panel-icon {
        float: left;
        font-size: 48px;
      }
      .card-panel-description {
        font-weight: bold;
        .card-panel-text {
          line-height: 18px;
          color: #fff;
          font-size: 16px;
          margin-bottom: 12px;
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
    .daiban {
      width: 20% !important;
    }
  }
}
</style>
